<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="author" content="得闲技术 Team">
    <meta name="copyright" content="得闲技术">
    <title>修改角色 - Powered By 得闲技术</title>
    [#include "/admin/main/resources/list.ftl"/]
</head>
<body class="admin secondary">
<main>
    <div class="container-fluid">
        <form id="saveOrUpdateForm" class="ajax-form form-horizontal" action="modify_role" method="post">
            <input type="hidden" name="id" value="[#if content??]${content.id}[#else]0[/#if]" />
            <div class="panel panel-default">
                <div class="panel-heading">修改角色</div>
                <div class="panel-body padding-5">

                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#basic" data-toggle="tab">基本信息</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="basic" class="tab-pane active">
                            <div class="form-group">
                                <label class="col-xs-3 col-sm-2 control-label" for="username">用户名:</label>
                                <div class="col-xs-9 col-sm-4 form-control-static">
                                    ${content.username}
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 col-sm-2 control-label" for="mobile">手机号码:</label>
                                <div class="col-xs-9 col-sm-4 form-control-static">
                                    ${content.mobile}
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 col-sm-2 control-label" for="name">姓名:</label>
                                <div class="col-xs-9 col-sm-4 form-control-static">
                                    ${content.name}
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 col-sm-2 control-label item-required" for="role">角色:</label>
                                <div class="col-xs-9 col-sm-4">
                                    [#list roles as role]
                                        <div class="checkbox checkbox-inline" title="${role.description!}"
                                                data-toggle="tooltip">
                                            <input id="roleIds_${role_index}" name="roleIds" type="checkbox"
                                                    value="${role.id}" required="required" [#if content?? && content.roleIds?seq_contains(role.id)] checked="checked"[/#if]>
                                            <label for="roleIds_${role_index}">${role.name!}</label>
                                        </div>
                                    [/#list]
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-xs-9 col-sm-10 col-xs-offset-3 col-sm-offset-2">
                            <button class="btn btn-primary" type="submit">确 定</button>
                            <button class="btn btn-default" type="button" data-action="back">返 回</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</main>
<script>
    $().ready(function () {

        var $saveOrUpdateForm = $("#saveOrUpdateForm");

        // 表单验证
        $saveOrUpdateForm.validate({
            rules: {
                name: {
                    required: true,
                    pattern: /^[_\u4e00-\u9fa5]+$/,
                },
                rePassword: {
                    equalTo: "#password"
                },
                username: {
                    pattern: /^[0-9a-zA-Z_\u4e00-\u9fa5]+$/,
                    remote: {
                        url: "check_username",
                        cache: false
                    }
                },
                mobile: {
                    remote: {
                        url: "check_mobile",
                        cache: false
                    }
                }
            },
            messages: {
                name: {
                    pattern: "姓名不符合规范"
                },
                username: {
                    pattern: "用户名不符合规范",
                    remote: "用户名已存在"
                },
                mobile: {
                    remote: "手机号码已存在"
                }
            },
            submitHandler: function (form) {
                $(form).ajaxSubmit();
            }
        });
    });
</script>
</body>
</html>
